<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>纯 CSS 实现猫笑起来的动画</title>
    <style type="text/css">
        body {
            background-color: #d69a44;
        }

        /* face */

        .face {
            position: absolute;
            left: 50%;
            margin-left: -175px;
            top: 40px;
            width: 350px;
            height: 250px;
            /*左上 右上 左下 右下 弧度不一哦   */
            border-radius: 50% 50% 30% 30%;
            border: 2px solid #3f200b;
            z-index: 10;
            background: #fbf8f1;
            overflow: hidden;
        }

        /*ear*/

        .ear-wrap {
            position: absolute;
            left: 50%;
            width: 300px;
            margin-left: -150px;
            margin-top: 20px;
        }

        .ear {
            position: absolute;
            width: 80px;
            height: 100px;
            border: 2px solid #000;
            background: #fbf8f1;
            border-radius: 100% 10% 50% 0%;
            transition: transform ease-in-out 1s;
        }

        .ear-wrap .right {
            left: auto;
            right: 0;
            border-radius: 10% 100% 0% 50%;
            background: #f1ac2b;
        }

        /* 头发 */

        .hair {
            position: absolute;
            width: 120px;
            height: 120px;
            left: 50%;
            margin-left: 50px;
            margin-top: -40px;
            background: #f3b32e;
            border-radius: 50% 50% 50% 50%;
        }

        .face-red {
            position: absolute;
            height: 20px;
            width: 50px;
            background: red;
            top: 45px;
            /*top: 64px;*/
            left: 25px;
            border-radius: 50% 50% 50% 50%;
            background: #e85a5e;
            opacity: 0.0;
            transition: opacity ease-in-out 1s;
        }

        /* 鼻子 */

        .nose {
            width: 20px;
            height: 10px;
            border-bottom: 8px solid #000;
            border-radius: 0% 0% 50% 50%;
            top: 154px;
            left: 50%;
            margin-left: -10px;
            position: absolute;
        }

        /*mouth*/

        /*鼠标hover样式 写在这里*/

        /*耳朵*/

        .face:hover~.ear-wrap .ear {
            transform: rotate(-30deg);
        }

        .face:hover~.ear-wrap .right {
            transform: rotate(30deg);
        }

        /*嘴巴*/
        .mouth-wrap {
            position: absolute;
            top: 168px;
            width: 80px;
            left: 50%;
            margin-left: -40px;
            height: 20px;
            overflow: hidden;
        }

        .mouth {
            width: 40px;
            height: 40px;
            border-bottom: 4px solid #000;
            border-right: 4px solid #000;
            border-radius: 0% 40% 50% 20%;
            margin-top: -26px;
            position: absolute;
            left: 0;
            transition: all ease-in-out 1s;

        }

        .mouth-wrap .right {
            border-bottom: 4px solid #000;
            border-right: none;
            border-left: 4px solid #000;
            border-radius: 40% 0% 20% 50%;
            position: absolute;
            left: auto;
            right: 0;
        }

        .face:hover .mouth-wrap .mouth {
            border-radius: 0% 40% 50% 50%;
        }

        .face:hover .mouth-wrap .right {
            border-radius: 40% 0% 50% 50%;
        }

        /*眼睛*/
        .eye-wrap {
            position: absolute;
            width: 280px;
            height: 70px;
            top: 90px;
            left: 50%;
            margin-left: -140px;
            overflow: hidden;
        }

        .eye {
            height: 100px;
            width: 100px;
            position: absolute;
        }

        .eye-circle {
            width: 100px;
            height: 80px;
            border: 2px solid #482507;
            overflow: hidden;
            position: absolute;
            background: #fff;
            border-radius: 50% 50% 40% 40%;
            box-sizing: border-box;
        }

        .eye-core {
            height: 55px;
            width: 46px;
            border-radius: 50% 50% 50% 50%;
            /* margin: 0 auto; */
            background: #000;
            position: absolute;
            left: 50%;
            margin-left: -23px;
            transition: transform ease-in-out 1s;
        }

        .eye-bottom {
            height: 50px;
            width: 100px;
            border-radius: 40% 40% 50% 50%;
            position: absolute;
            margin-top: 48px;
            border-top: 2px solid #46240b;
            background: #f6f7f2;
            /*和肤色一样的眼袋..*/
            transition: transform ease-in-out 1s;
        }

        .eye-wrap .right {
            left: auto;
            right: 0px;
        }

        .face:hover .eye-core {
            transform: scaleX(0.9);
        }

        .face:hover .eye-bottom {
            transform: translateY(-12px);
        }

        .face:hover .face-red {
            opacity: .5;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 脸 -->
        <div class="face">
            <!-- 头发 -->
            <div class="hair">
                <div></div>
            </div>
            <!-- 眼睛 -->
            <div class="eye-wrap">
                <div class="eye left">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
                <div class="eye right">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
            </div>
            <!-- 鼻子 -->
            <div class="nose">
            </div>
            <!-- 嘴巴 -->
            <div class="mouth-wrap">
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>
        </div>
        <!-- 耳朵 -->
        <div class="ear-wrap">
            <div class="ear left"> </div>
            <div class="ear right"> </div>
        </div>
    </div>
</body>
<script>
    /***
     * 
     *  拆分动画：
     *      需要变的区域：耳朵、眼睛(眼球、眼袋、红晕) 、嘴巴上翘
     *      
     *  熟悉页面结构：√
     *      
     *  分析动画:
     *      事件: .face:hover
     *      耳朵: 旋转 
     *      嘴巴: border-radius的变化
     *      眼睛: 
     *         眼球变瘦 缩放
     *         眼袋线上提: eye-bottom 的margin-top 即移动
     *         红晕: 由透明变红 
     * 但是有个问题:
     *      鼠标移出之后,动画瞬间消失??
     * ===>  transition: transform ease-in-out 1s; 应该加在hover之前的
     * 
     * 
     */
</script>

</html>